<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>用户管理</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
  </head>
  <body>
    <div style="padding: 16px">
      <div class="layui-card">
        <div class="layui-card-body">
          <table
            class="layui-hide"
            id="user-table"
            lay-filter="user-table"
          ></table>
        </div>
      </div>
    </div>
    <form
      class="layui-form"
      lay-filter="user-form"
      id="user-form"
      action=""
      style="padding: 15px; display: none"
    >
      <div class="layui-form-item">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="id"
            value="0"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
            disabled
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="username"
            placeholder="请输入用户名"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="nickname"
            placeholder="请输入用户标识"
            lay-verify="required"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="mobile"
            placeholder="请输入用户描述"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="email"
            placeholder="请输入用户权限列表"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="create_at"
            class="layui-input"
            id="form_create_at"
            placeholder="yyyy-MM-dd HH:mm:ss"
            autocomplete="off"
            lay-verify="required"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button
            type="submit"
            class="layui-btn"
            lay-submit
            lay-filter="user-form-btn"
          >
            立即提交
          </button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    <script type="text/html" id="user-toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="user-toolbar-add">
          新增角色
        </button>
      </div>
    </script>
    <script type="text/html" id="user-tool">
      <div class="layui-btn-container">
        <button
          class="layui-btn layui-btn-sm layui-bg-blue"
          lay-event="user-tool-edit"
        >
          编辑
        </button>
        <button
          class="layui-btn layui-btn-sm layui-bg-yellow"
          lay-event="user-tool-detail"
        >
          授权
        </button>
        <button
          class="layui-btn layui-btn-sm layui-bg-red"
          lay-event="user-tool-del"
        >
          删除
        </button>
      </div>
    </script>

    <!--用户授权标签-->
    <form
      class="layui-form"
      action=""
      id="user-role-form"
      lay-filter="user-role-form"
    >
      <div class="row" style="margin: 10px 5px">
        <ul id="user_role" class="dtree" data-id="0"></ul>
      </div>
      <div class="bottom">
        <div class="button-container">
          <button
            type="submit"
            class="layui-btn layui-btn-primary layui-btn-sm"
            lay-submit=""
            lay-filter="user-role-save"
          >
            <i class="layui-icon layui-icon-ok"></i>
            提交
          </button>
          <button type="reset" class="layui-btn layui-btn-sm">
            <i class="layui-icon layui-icon-refresh"></i>
            重置
          </button>
        </div>
      </div>
    </form>
    <script>
      layui.use(function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var tree = layui.tree;

        let user_id = -1;

        table.render({
          elem: "#user-table",
          id: "user-table",
          url: "/api/v1/user", // 此处为静态模拟数据，实际使用时需换成真实接口
          height: "full-35", // 最大高度减去其他容器已占有的高度差
          toolbar: "#user-toolbar",
          page: true,
          cols: [
            [
              //标题栏
              { field: "id", title: "ID", width: 80, sort: true },
              { field: "username", title: "用户名", width: 120 },
              { field: "nickname", title: "昵称", width: 120 },
              { field: "mobile", title: "手机号", width: 160 },
              { field: "email", title: "邮箱", width: 120 },
              { field: "create_at", title: "创建时间", width: 180 },
              {
                fixed: "right",
                title: "操作",
                width: 180,
                align: "center",
                toolbar: "#user-tool",
              },
            ],
          ],
        });

        table.on("toolbar(user-table)", function (obj) {
          if (obj.event === "user-toolbar-add") {
            $("#user-form")[0].reset();
            layer.open({
              type: 1,
              shade: false,
              content: $("#user-form"),
              area: ["50%", "80%"],
            });
            form.render($("#user-form"));
          }
        });

        table.on("tool(user-table)", function (obj) {
          if (obj.event === "user-tool-edit") {
            form.val("user-form", obj.data);
            layer.open({
              type: 1,
              shade: false,
              content: $("#user-form"),
              area: ["50%", "80%"],
            });
          } else if (obj.event === "user-tool-del") {
            $.ajax({
              url: `/api/v1/user/${obj.data.id}`,
              type: "DELETE",
              contentType: "application/json",
              headers: {
                "X-CSRF-TOKEN": getCookie("csrf_access_token"),
              },
              success: function (res) {
                if (!res.code) {
                  table.reloadData("user-table");
                }
              },
            });
          } else if (obj.event === "user-tool-detail") {
            user_id = obj.data["id"];
            $.ajax({
              url: "/api/v1/role?type=tree",
              type: "get",
              success: function (ret) {
                let data = [];
                $.each(ret.data, function (index, item) {
                  data.push({ id: item.id, title: item.name });
                });
                tree.render({
                  elem: "#user_role",
                  id: "user_role",
                  data: data,
                  showCheckbox: true,
                });
                // 请求获取当前用户的权限
                $.ajax({
                  url: `/api/v1/user/user_role/${user_id}`,
                  type: "get",
                  success: function (ret) {
                    tree.setChecked("user_role", ret.data);
                  },
                });
              },
            });
            // 用户授权
            layer.open({
              type: 1,
              title: "授权",
              shade: false,
              area: ["500px", "500px"],
              // content: "/views/user_role/" + obj.data["id"]
              content: $("#user-role-form"),
            });
          }
        });

        form.on("submit(user-form-btn)", function (data) {
          var field = data.field;
          let method, url;
          if (field.id == 0) {
            field.id = null;
            method = "POST";
            url = "/api/v1/user";
          } else {
            method = "PUT";
            url = `/api/v1/user/${field.id}`;
          }
          $.ajax({
            url: url,
            type: method,
            contentType: "application/json",
            headers: {
              "X-CSRF-TOKEN": getCookie("csrf_access_token"),
            },
            data: JSON.stringify(field),
            success: function (res) {
              if (!res.code) {
                layer.closeAll();
                table.reloadData("user-table");
              }
            },
          });
          return false;
        });

        // form_create_at
        laydate.render({
          elem: "#form_create_at",
          type: "datetime",
        });

        function get_id(list_tree_data) {
          if (Array.isArray(list_tree_data)) {
            let ret = [];
            $.each(list_tree_data, function (index, item) {
              if (item?.children) {
                ret.push(...get_id(item.children));
              }
              ret.push(...get_id(item));
            });
            return ret;
          } else {
            return [list_tree_data.id];
          }
        }

        form.on("submit(user-role-save)", function (data) {
          let param = tree.getChecked("user_role"); // 获取选中节点的数据
          let rights_ids = get_id(param).join();
          $.ajax({
            url: `/api/v1/user/user_role/${user_id}`,
            data: JSON.stringify({ rights_ids: rights_ids }),
            dataType: "json",
            contentType: "application/json",
            type: "put",
            success: function (result) {
              if (result.code === 0) {
                layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                  layer.closeAll();
                });
              } else {
                layer.msg(result.msg, { icon: 2, time: 1000 });
              }
            },
          });
          return false;
        });
      });
    </script>
  </body>
</html>
